<script setup>
import {onMounted, ref, watch} from "vue";
import IconNormal from "../assets/icons/icon_message_normal.png";
import IconActive from "../assets/icons/icon_message.png";
import IconTopNormal from "../assets/icons/icon_top.png";
import IconTopHover from "../assets/icons/icon_top_hover.png";

const props = defineProps({
  show: {type: Boolean, required: true},
  showIcon: {type: Boolean, required: true},
  showBox: {type: Boolean, default: false},
})
const emit = defineEmits(['onScrollTop', 'onMessage'])
const state = ref({
  topIcon: IconTopNormal,
  msgIcon: IconNormal,
})
onMounted(() => {
  watch(() => props.showBox, (newValue) => {
    if (newValue) {
      state.value.msgIcon = IconActive
    } else {
      state.value.msgIcon = IconNormal
    }
  })
})

</script>

<template>
  <view class="column float">
    <img class="fadeIn d2s" v-if="show" :src="state.topIcon" alt=""
         @click="emit('onScrollTop')"
         @mouseover="state.topIcon = IconTopHover"
         @mouseleave="state.topIcon= IconTopNormal"
    />
    <img class="message" v-if="showIcon" :src="state.msgIcon" alt=""
         @click="emit('onMessage')"
         @mouseover="state.msgIcon = IconActive"
         @mouseleave="showBox? state.msgIcon = IconActive : state.msgIcon= IconNormal"
    />
  </view>
</template>

<style scoped>
.float {
  position: fixed;
  bottom: 10%;
  right: 4%;
  z-index: 10;

  img {
    cursor: pointer;
    width: 80%;
  }

  .message {
    margin-top: 30%;
  }
}
</style>